<template>
  <div>
    <quill-editor
      ref="myTextEditor"
      v-model="answerHtml"
      :options="editorOption"
      :style="'height:' + styles.height"
      @change="editChange($event)"
    ></quill-editor>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import { addQuillTitle } from "../../utils/quill-title.js";
const katex = require("katex");
const win = window;
win.katex = katex;
import "katex/dist/katex.css";
export default {
  props: ["styles"],
  data() {
    return {
      answerHtml: "",
      answerText: "",
      editorOption: {
        placeholder: "",
        modules: {
          formula: true,
          toolbar: [["code-block", "formula"]],
        },
      },
    };
  },
  components: {
    quillEditor,
  },
  methods: {
    editChange({html, text }){
      this.answerHtml = html;
      this.answerText = text;
      this.$emit('editChange')
    }
  },
  created() {
  },
  computed: {},
  watch: {},
  mounted() {
    // 添加悬停提示
    addQuillTitle();
    //设置高度
    var element1 = document.querySelector('.ql-editor.ql-blank')
    var element2 = document.querySelector('.ql-container.ql-snow')
    element1.style.height = this.styles.height
    element2.style.height = this.styles.height
  },
};
</script>
<style scoped>

</style>
